<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/lib/vue-v2.5.13/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div id="app">
			<p>app1</p>
			{{ message }}
		</div>
		<div id="app-2">
			<p>app2</p>
			<span v-bind:title="message">
		    鼠标悬停几秒钟查看此处动态绑定的提示信息！
		  </span>
			<span>{{message}}</span>
		</div>
		<div id="app-3">
			<p>app3</p>
			<p v-if="seen">现在你看到我了</p>
		</div>
		<div id="app-4">
			<p>app4</p>
			<ol>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ol>
		</div>
		<div id="app-5">
			<p>app5</p>
			<p>{{ message }}</p>
			<button v-on:click="reverseMessage">逆转消息</button>
		</div>
		<div id="app-6">
			<p>app6</p>
			<p>{{ message }}</p>
			<input v-model="message">
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!'
				}
			})
			var app2 = new Vue({
				el: '#app-2',
				data: {
					message: '页面加载于 ' + new Date().toLocaleString()
				}
			})
			var app3 = new Vue({
				el: '#app-3',
				data: {
					seen: true
				}
			})
			var app4 = new Vue({
				el: '#app-4',
				data: {
					todos: [{
							text: '学习 JavaScript'
						},
						{
							text: '学习 Vue'
						},
						{
							text: '整个牛项目'
						}
					]
				}
			})
			var app5 = new Vue({
				el: '#app-5',
				data: {
					message: 'Hello Vue.js!'
				},
				methods: {
					reverseMessage: function() {
						this.message = this.message.split('').reverse().join('')
					}
				}
			})
			var app6 = new Vue({
				el: '#app-6',
				data: {
					message: 'Hello Vue!'
				}
			})
		</script>
	</body>

</html>